Skip to content

fix: persist theme selection across reloads - #49

Merged
NagariaHussain merged 2 commits into
developfrom
fix/theme-persistence
Jul 20, 2026
Merged

fix: persist theme selection across reloads#49
NagariaHussain merged 2 commits into
developfrom
fix/theme-persistence

Conversation

@ishad05

@ishad05 ishad05 commented Jul 17, 2026

Copy link
Copy Markdown
Collaborator

Closes #45.

What was wrong

  • The theme was saved to localStorage on toggle, but nothing read it back on load, so every refresh went back to light.
  • On the settings page itself, the toggle showed as on while the page rendered light, because the stored value fed the switch but never got applied.

What changed

  • The theme is applied by a small inline script in the page head, before the app JS runs, so there is no light flash on load.
  • Both settings pages had their own identical copies of the theme helpers. They now share lib/theme.ts.
  • The script only reads the stored value. It does not fall back to the OS setting, since the app default is light regardless of OS.

Testing

  • New student-theme.spec.ts: toggles dark, reloads, checks it holds on another page, then toggles back.
  • Second test delays the app bundle and checks the theme is already applied before React mounts.
  • Both tests were confirmed to fail with the fix removed.

Comment thread dashboard/index.html
Comment on lines +8 to +13
<script>
try {
if (localStorage.getItem("theme") === "dark")
document.documentElement.classList.add("dark");
} catch (e) {}
</script>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't app JS do it in JS side?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, but main.tsx executes just a bit late, and so screen flash is seen when switching to dark mode each time. In case of an inline script, the code executes at once, preventing that from happening. Will add a comment on index.html to explain this better.

@NagariaHussain
NagariaHussain merged commit 3442bdd into develop Jul 20, 2026
4 checks passed
@NagariaHussain
NagariaHussain deleted the fix/theme-persistence branch July 20, 2026 08:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Theme selection does not persist

2 participants